<template>
  <div>
    <!-- 1 卡片区域 -->
    <el-card class="box-card">
      <!-- 1第一行面包屑 -->
      <div class="one">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            ><span style="color: gray"> 页面管理</span></el-breadcrumb-item
          >
          <el-breadcrumb-item>导航配置</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 按钮 -->
        <div class="but">
          <el-button
            style="color: #004fe0; border: 1px solid #004fe0"
            @click="loodlog"
            >预览</el-button
          >
          <el-button
            style="background-color: #004fe0; color: white"
            @click="addtable"
            >保存</el-button
          >
          <el-button
            style="color: #004fe0; border: 1px solid #004fe0; margin-right: 0"
            @click="remtables"
            >取消</el-button
          >
        </div>
      </div>
      <div class="objss">
  <!-- 2 第二行标题 -->
      <div class="two">导航配置</div>
      <!-- 3 第三行搜索 -->
      <div class="three">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <!-- 4 第四行 树状图 
      default-expand-all
          :expand-on-click-node="false"
      
      -->
      <div class="four">
        <el-tree
          :data="treedat"
          node-key="id"
          :filter-node-method="filterNode"
          ref="tree"
          :indent='30'
        >
          <span
            :class="
              node.level == 4
                ? 'fourtext custom-tree-node'
                : '' || node.level == 3
                ? 'threetext custom-tree-node'
                : '' || node.level == 2
                ? 'twotext custom-tree-node'
                : '' || node.level == 1
                ? 'onetext custom-tree-node'
                : ''
            "
            slot-scope="{ node, data }"
          >
            <span>{{node.data.name}}</span>
            <div>
              <!-- 编辑 -->
              <i class="el-icon-edit" @click="changename(data, node)"></i>
              <!-- 新增 -->
              <i
                v-show="
                  node.level !== 4 &&
                  data.id !== '6947dafe-0626-48d9-8776-572f022bfe84' &&
                  data.id !== 'e7a2ebff-7088-4f30-a031-ff72d4c5e8ed' &&
                  data.id !== '99c7198a-5e93-42ec-a1eb-8ccfe22c337a' &&
                  data.id !== '1b3ef709-3e66-42a9-b66c-a1bc60c77ad6'
                "
                class="el-icon-circle-plus-outline"
                @click="append(data, node)"
              ></i>
              <!-- 删除 -->
              <i
                v-show="node.level !== 1"
                class="el-icon-remove-outline"
                @click="remove(data, node)"
              ></i>
              <!-- 上移动 node.level !== 1 && node.level !== 2 && node.parent.data.children[0]!=data-->
              <i
                v-show="
                  node.level == 1
                    ? node.parent.data[0] != data
                    : node.parent.data.children[0] != data
                "
                class="el-icon-caret-top"
                @click="topadd(data, node)"
              ></i>
              <!-- 下移动  node.level !== 1 && node.level !== 2
                &&
                node.parent.data.children[node.parent.data.children.length-1]!=data -->
              <i
                v-show="
                  node.level == 1
                    ? node.parent.data[node.parent.data.length - 1] != data
                    : node.parent.data.children[
                        node.parent.data.children.length - 1
                      ] != data
                "
                class="el-icon-caret-bottom"
                @click="bottomadd(data, node)"
              ></i>
            </div>
          </span>
        </el-tree>
      </div>
      </div>
    
    </el-card>
    <!-- loadding -->

    <!--1 编辑对话框 -->
    <el-dialog
      title="编辑"
      :before-close="qxcomok"
      :visible.sync="compilelog"
      width="30%"
    >
      <span>
        <!-- <el-input v-model="bjforms.name"></el-input> -->
        <el-form
          label-position="left"
          ref="bianjiform"
          :model="bjforms"
          label-width="80px"
        >
          <el-form-item label="编辑名称">
            <el-input
              :maxlength="levels < 3 ? '6' : '11'"
              show-word-limit
              type="text"
              v-model="bjforms.name"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qxcomok">取 消</el-button>
        <el-button
          style="background-color: #004fe0; color: white"
          @click="qrcomok"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 2预览框 -->
    <el-dialog
      :show-close="false"
      class="yulan"
      :visible.sync="lookread"
      width="60%"
    >
      <div class="cloese" @click="closess"></div>
      <div class="onehead">
        <div
          v-for="(item, index) in treedat"
          :key="index"
          @click="tabname(item, index)"
          :class="indexs == index ? 'clicktext' : ''"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="twohead">
        <div :class="childrentab.length ? 'erji' : ''">
          <div
            v-for="(item, index) in childrentab"
            :key="index"
            @click="erjis(item, index)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="erbox">
          <div class="sanji" v-for="sanji in erchildtab" :key="sanji.id">
            <div class="sanjis">{{ sanji.name }}</div>
            <div
              class="sijisi"
              v-for="(item, index) in sanji.children"
              :key="index"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 新增对话框 -->
    <el-dialog title="新增" :visible.sync="addcompilelog" width="30%">
      <span>
        <el-form
          label-position="left"
          ref="form"
          :model="addfroms"
          label-width="80px"
        >
          <el-form-item label="新增名称">
            <el-input
              :maxlength="levels < 3 ? '6' : '11'"
              show-word-limit
              type="text"
              v-model="addfroms.name"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addcompilelog = false">取 消</el-button>
        <el-button
          style="background-color: #004fe0; color: white"
          @click="appendok"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 遮罩层 -->
    <div
      v-loading="mockloading"
      v-show="mockloading"
      element-loading-text="正在保存中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      class="mocks"
    ></div>
  </div>
</template>
<script>
//获取平台列表   新增导航  删除导航栏, 编辑导航栏
import {
  getNavs,
  addNavs,
  delNavs,
  bjNavs,
  getnameNavs,
} from "@/api/srapi/srapi.js";
export default {
  name: "navigation",
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  data() {
    return {
      levels: "", //层级
      //遮罩层loadding
      mockloading: false,
      //接口新增需要得数组
      addarrs: [],
      //新增需要得数组
      addarrslist: [],
      //接口删除需要得数组
      remarrs: [],
      //删除需要比较得数组
      remarrslist: [],
      //编辑名字取消
      oldname: null,
      //编辑当前修改得对象
      newbianji: null,
      //编辑接口得数组
      bjiarr: [],
      //上移动得数组
      toplist: [],
      //上移动当前得索引
      nowsort: null,
      //下移动当前的id
      botsort: null,
      //下移动的数组
      botlist: [],
      //下移动下一项的id
      nextbotsort: null,

      filterText: "", //搜索框
      // inputs: { name: null }, //搜索框
      treedat: [], //树形表格数据
      addcompilelog: false, //新增对话框的显示隐藏
      addfroms: {}, //新增对话框的表单数据
      compilelog: false, //编辑导航框
      bjforms: {},
      lookread: false, //预览框
      childrentab: [], //一级切换栏的table
      indexs: 0, //一级颜色变得索引
      erchildtab: [], //二级表得数据
      inde: 0, //二级索引
      sortshow: true, //sort隐藏
      samname: [], //编辑校验不重名
      addsamname: [], //新增校验不重名命
    };
  },
  methods: {
    // 下移动
    bottomadd(data, node) {
      //当前项的id
      this.botsort = JSON.parse(JSON.stringify(data.sort));
      //当前的数组
      if (node.level == 1) {
        this.botlist = node.parent.data;
      } else {
        this.botlist = node.parent.data.children;
      }
      // this.botlist=node.parent.data.children
      console.log(this.botlist);
      const ind = this.findex(this.botlist, "name", data);
      console.log(ind);
      //当前下一项的id
      this.nextbotsort = JSON.parse(JSON.stringify(this.botlist[ind + 1].sort));
      this.botlist[ind + 1].sort = this.botsort;
      this.botlist.splice(ind, 1);
      //实现页面的数据刷新
      setTimeout(() => {
        data.sort = this.nextbotsort;
        this.botlist.splice(ind + 1, 0, data);
      }, 200);
      //
      setTimeout(() => {
        //如果 当前元素有id 直接追加修改
        if (data.id) {
          this.bjiarr.push(data);
          //被迫变更的一项
          console.log(this.botlist[ind]); //别破的
          console.log(this.botlist[ind + 1]); //当前的
          if (this.botlist[ind].id) {
            this.bjiarr.push(this.botlist[ind]);
          } else {
            const ind = this.findex(
              this.addarrs,
              "name",
              this.botlist[ind],
              "parentId"
            );
            this.addarrs[ind].sort = this.botlist[ind].sort;
          }
        } else {
          const ind = this.findex(this.addarrs, "name", data, "parentId");
          this.addarrs[ind].sort = data.sort;
          if (this.botlist[ind].id) {
            this.bjiarr.push(this.botlist[ind]);
          } else {
            const ind = this.findex(
              this.addarrs,
              "name",
              this.botlist[ind],
              "parentId"
            );
            this.addarrs[ind].sort = this.botlist[ind].sort;
          }
        }
      }, 400);
    },

    //上移动
    topadd(data, node) {
      //当前项的id
      this.nowsort = JSON.parse(JSON.stringify(data.sort));
      //当前的数组
      if (node.level == 1) {
        this.toplist = node.parent.data;
      } else {
        this.toplist = node.parent.data.children;
      }
      // this.toplist=node.parent.data.children
      console.log(this.toplist);
      const ind = this.findex(this.toplist, "name", data);
      //变更本地数组
      this.toplist.splice(ind, 1);
      data.sort = this.toplist[ind - 1].sort;
      setTimeout(() => {
        this.toplist[ind - 1].sort = this.nowsort;
        this.toplist.splice(ind - 1, 0, data);
      }, 200);
      //如果当前项有id 每次移动都有两个变更的数据  name相同
      setTimeout(() => {
        if (data.id) {
          this.bjiarr.push(data);
          //如果被迫修改的也有id 追加
          if (this.toplist[ind].id) {
            this.bjiarr.push(this.toplist[ind]);
          } else {
            //没有id  就从新增数组里面修改sort
            const inds = this.findex(
              this.addarrs,
              "name",
              this.toplist[ind],
              "parentId"
            );
            this.addarrs[inds].sort = this.toplist[ind].sort;
          }
        } else {
          const ids = this.findex(this.addarrs, "name", data, "parentId");
          this.addarrs[ids].sort = data.sort;
          if (this.toplist[ind].id) {
            this.bjiarr.push(this.toplist[ind]);
          } else {
            const inds = this.findex(
              this.addarrs,
              "name",
              this.toplist[ind],
              "parentId"
            );
            this.addarrs[inds].sort = this.toplist[ind].sort;
          }
        }
      }, 400);
    },
    //下移动

    //3.点击编辑名字
    changename(data, node) {
      this.levels = node.level;
      console.log(this.treedat);
      console.log(data);
      console.log(node);
      this.compilelog = true;
      console.log(data.name);
      this.newbianji = data;
      this.oldname = JSON.parse(JSON.stringify(data.name));
      console.log(node.parent.data.children);
      this.samname = [];
      node.parent.childNodes.forEach((item) => {
        this.samname.push(item.data.name);
      });
      this.samname.splice(this.samname.indexOf(data.name), 1);
      console.log(this.samname);
      if (node.level == 4 || node.level == 3) {
        this.sortshow = true;
      } else {
        this.sortshow = false;
      }
      this.bjforms = data;
      if (!data.sort) {
        this.bjforms.sort = 0;
      }
    },
    //3.1确认编辑名字
    qrcomok() {
      if (this.samname.indexOf(this.bjforms.name) == -1) {
        //  this.bjnav(this.bjforms);
        console.log(this.bjforms.sort);
        this.compilelog = false;
        console.log(this.bjforms);
        //没有id从新增数组里修改  有id直接传入编辑数组
        if (this.bjforms.id) {
          this.bjiarr.push(this.bjforms);
        } else {
          const ind = this.findex(
            this.addarrs,
            "sort",
            this.bjforms,
            "parentId"
          );
          console.log(ind);
          this.addarrs.splice(ind, 1);
          setTimeout(() => {
            this.addarrs.push(this.bjforms);
          }, 200);
        }
      } else {
        this.$message({
          type: "warning",
          message: "该名称已存在",
        });
      }
    },
    //3.2 取消编辑名字
    qxcomok() {
      this.compilelog = false;
      this.newbianji.name = this.oldname;
      // this.getnav();
    },
    //查找索引
    findex(arr, key, obj, key2) {
      // console.log(arr);
      for (let i = 0; i < arr.length; i++) {
        // console.log(i);
        // console.log(arr.length);
        // console.log(arr[i]);
        // console.log(arr[i][sort]);
        if (arr[i][key] == obj[key] && arr[i][key2] == obj[key2]) {
          return i;
        }
      }
    },
    //4删除
    remove(data, node) {
      console.log(data);
      console.log(node);
      if (
        (node.level == 3 && data.children && data.children.length > 0) ||
        (node.level == 2 && data.children && data.children.length > 0)
      ) {
        this.$message({
          type: "warning",
          message: "请先删除子导航",
        });
      } else {
        this.remarrslist = node.parent.data.children;
        this.$confirm(`将永久删除 ${data.name}, 是否继续?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            //有id直接追加  没有id 从新增得数组里面删除

            if (data.id) {
              // this.remarrslist.push(data)
              // console.log("当前得id",data["id"]);
              console.log(this.findex(this.remarrslist, "id", data));
              console.log(this.remarrslist);
              const ind = this.findex(this.remarrslist, "id", data);
              this.remarrslist.splice(ind, 1);
              console.log(this.remarrslist);
              this.remarrs.push({ id: data.id });
            } else {
              const ind = this.findex(this.remarrslist, "name", data);

              this.remarrslist.splice(ind, 1);
              const inds = this.findex(this.addarrs, "name", data, "parentId");
              this.addarrs.splice(inds, 1);
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
      // console.log(data,node.parent.data.children);
      // this.remarrslist=JSON.parse(JSON.stringify(node.parent.data.children))
    },
    //保存
    addtable() {
      this.mockloading = true;
      let i = 0;
      // let is= this.addarrs.length+this.remarrs.length+this.bjiarr.length
      this.bjiarr = [...new Set(this.bjiarr)];
      // console.log(this.bjiarr);
      for (let i = 0; i < this.remarrs.length; i++) {
        for (let j = 0; j < this.bjiarr.length; j++) {
          if (this.remarrs[i].id == this.bjiarr[j].id) {
            this.bjiarr.splice(j, 1);
          }
        }
      }
      // console.log(this.bjiarr);
      let is = this.addarrs.length + this.remarrs.length + this.bjiarr.length;
      console.log(this.addarrs,'新增');
      console.log(this.remarrs,'删除');
      console.log(this.bjiarr,'编辑');
     //新增接口
     this.addarrs.forEach((item,index)=>{
           setTimeout(()=>{
              this.addnav(item);
           },index*2500)
     })
     //删除接口
    this.remarrs.forEach((item,index)=>{
           setTimeout(()=>{
               this.del(item)
           },index*2500)
     })
     //编辑接口
    this.bjiarr.forEach((item,index)=>{
           setTimeout(()=>{
             this.bjnav(item);
           },index*2500)
     })
     let a =[this.addarrs.length,this.remarrs.length,this.bjiarr.length]
     let max = Math.max.apply(Math,a)
     console.log(max);
      setTimeout(() => {
            this.$message({
              type: "success",
              message: "保存成功",
            });
            this.addarrs = [];
            this.remarrs = [];
            this.bjiarr = [];
            this.getnav();
            this.mockloading = false;
          },( max * 2500)+100);
          console.log(( max * 2500)+500);
        
     //新增接口
      // Promise.all([
      //   this.addarrs.forEach((item, index) => {
      //     i++;
      //     //  this.addnav(item);
      //     setTimeout(() => {
      //       this.addnav(item);
      //     }, index * 3000);
      //   }),
      //   //删除接口
      //   this.remarrs.forEach((item, index) => {
      //     i++;
      //     // this.del(item);
      //     setTimeout(() => {
      //       this.del(item);
      //     }, index * 3000);
      //   }),
      //   //编辑接口
      //   this.bjiarr.forEach((item, index) => {
      //     i++;
      //     //  this.bjnav(item);
      //     setTimeout(() => {
      //       this.bjnav(item);
      //     }, index * 3000);
      //   }),
      // ]).then((dat) => {
      //   console.log(is);
      //   console.log(i);
      //   if (is == i) {
      //     setTimeout(() => {
      //       this.$message({
      //         type: "success",
      //         message: "保存成功",
      //       });
      //       this.addarrs = [];
      //       this.remarrs = [];
      //       this.bjiarr = [];
      //       this.getnav();
      //       this.mockloading = false;
      //     }, (is + 0.1) * 3000);
      //   }
      // });
    },
    //取消
    remtables() {
      // 新增得数组
      console.log("新增", this.addarrs);
      // 删除得数组
      console.log("删除", this.remarrs);
      // 编辑得数组
      console.log("修改", this.bjiarr);
      setTimeout(() => {
        this.getnav();
      }, 500);
      this.addarrs = [];
      this.remarrs = [];
      this.bjiarr = [];
      this.$message({
        type: "success",
        message: "取消成功",
      });
    },
    //2点击新增
    append(data, node) {
      console.log(node.level);
      this.levels = node.level + 1;
      console.log(data);
      if (!data.id) {
        this.$message({
          type: "warning",
          message: "请先保存父级导航栏",
        });
      } else {
        //新增得项id
        this.addfroms = {};
        this.addarrslist = data.children;
        console.log(data.children.length);
        if (data.children.length < 1) {
          this.addfroms.sort = 1;
        } else {
          this.addfroms.sort = data.children[data.children.length - 1].sort + 1;
        }
        console.log(this.addsamname);
        this.addsamname = [];
        data.children.forEach((item) => {
          this.addsamname.push(item.name);
        });

        this.addfroms.parentId = data.id;
        this.addcompilelog = true;
      }
    },
    //2.1确认新增
    appendok() {
      if (this.addsamname.indexOf(this.addfroms.name) < 0) {
        this.addarrs.push(this.addfroms);
        setTimeout(() => {
          console.log(1);
          this.addarrslist.push(this.addfroms);
          console.log(this.addarrslist);
        });
        console.log(this.addarrs);
        this.addcompilelog = false;
        // this.addnav(this.addfroms);
        //setTimeout(()=>{
        //this.getnav();
        //  },500)
      } else {
        this.$message({
          type: "warning",
          message: "该名称已存在",
        });
      }
    },
    //关闭预览
    closess() {
      this.lookread = false;
    },

    //搜索功能
    filterNode(value, data, node) {
      if (!value) {
        return true;
      }
      let level = node.level;
      let _array = []; //这里使用数组存储 只是为了存储值。
      this.getReturnNode(node, _array, value);
      let result = false;
      _array.forEach((item) => {
        result = result || item;
      });
      return result;
    },
    //导航搜索功能
    getReturnNode(node, _array, value) {
      let isPass =
        node.data && node.data.name && node.data.name.indexOf(value) !== -1;
      isPass ? _array.push(isPass) : "";
      this.index++;
      console.log(this.index);
      if (!isPass && node.level != 1 && node.parent) {
        this.getReturnNode(node.parent, _array, value);
      }
    },
    //1.获取导航栏接口
    async getnav() {
      try {
        const { data: res } = await getNavs();
        this.treedat = this.eachReplaceKey(res.data);
      } catch (error) {
        console.log("错了");
      }
    },
    //2 新增导航的接口
    async addnav(val) {
      const res = await addNavs(val);
      console.log(res);
    },
    //3 删除导航栏接口
    async del(val) {
      const { data: res } = await delNavs(val);
      console.log(res);
      return res;
    },
    //4 编辑导航栏接口
    async bjnav(val) {
      const res = await bjNavs(val);
      console.log(res);
    },
    //5 按照名称查找搜索框
    async getnamenav(val) {
      const { data: res } = await getnameNavs(val);
      console.log(res.data);
      this.treedat = this.eachReplaceKey(res.data);
    },

    //预览框
    loodlog() {
      this.tabname(this.treedat[0], 0);
      this.lookread = true;
    },
    //递归改变children
    eachReplaceKey(city) {
      let item = [];
      city.map((list) => {
        let newData = {};
        newData.id = list.id;
        newData.name = list.name;
        newData.parentId = list.parentId;
        newData.sort = list.sort;
        if (list.parentList) {
          newData.children = this.eachReplaceKey(list.parentList);
        }
        item.push(newData);
      });
      return item;
    },
    //点击一级table切换
    tabname(val, index) {
      console.log(index);
      this.indexs = index;
      this.childrentab = val.children;
      console.log(val.children);
      this.erchildtab = this.childrentab[0];
    },
    //点击二级tab切换
    erjis(val, index) {
      this.erchildtab = val.children;
      console.log(val, index);
    },
  },
  mounted() {
    this.getnav();
  },
};
</script>
<style lang="scss" scoped>
//一级别
.onetext {
  font-size: 20px !important;
}
//二级别
.twotext {
  font-size: 18px !important;
}
//三级别
.threetext {
  font-size: 16px !important;
 
}
//四级别
.fourtext {
  font-size: 14px !important;
   
}
// 遮罩层
.mocks {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 22;
  font-size: 40px;
}

.box-card {
  //  width: 100%;
  margin-left: 24px;
  margin-top: 80px;
  margin-right: 24px;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 18px;
  padding-bottom: 200px;
}
/deep/.el-card__body {
  // 1第一行
  padding: 0 !important;
  .one {
    // display: flex;
    // justify-content: space-between;
    width: 100%;
    height: 32px;
   position: relative;
    // 面包屑
    .el-breadcrumb {
       position: absolute;
      left: 0;
      top: 0;
      font-size: 20px;
      height: 29px;
      line-height: 29px;
    }
    // 按钮
    .but {
      // margin-top: 32px;
         position: absolute;
      right: 0;
      top: 32px;

      .el-button {
        margin-right: 16px;
        margin-left: 0;
        height: 32px;
        line-height: 8px;
      }
    }
  }
  .objss{
    // overflow: auto;
 //第二行
  .two {
    margin-top: 48px;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
  }
  //第三行
  .three {
    width: 300px;
    margin: 0 auto;
    margin-top: 48px;
    .el-input__inner {
      height: 32px;
    }
    .el-input__inner:focus {
      border-color: #2672ed;
      box-shadow: 0px 0px 0px 2px rgb(197, 208, 238);
    }
  }
  //第四行
  .four {
    width: 420px;
    margin: 0 auto;
    margin-top: 24px;
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // font-size: 14px;
      padding-right: 8px;
    }
  }
  }
 
}
//树状图
/deep/ .el-card__body .four .custom-tree-node[data-v-4f7ee108] {
  // font-size: 20px;
  font-weight: 400;
  color: #45484d;
}
/deep/.el-tree-node__content {
  padding:19px;
}
/deep/.custom-tree-node {
  div {
    i {
      padding: 0 4px;
    }
  }
}
//预览
.yulan {
  margin-top: 50px;
  /deep/.el-dialog__header {
    padding: 0;
  }
  /deep/.el-dialog__body {
    .cloese {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: url("../friendlink/close.png") no-repeat center;
      background-size: 100% 100%;
      position: absolute;
      right: -25px;
      top: -25px;
    }

    height: 450px;
    background-color: #221b18;
    color: white;
    font-size: 20px;
    //一级单子
    .onehead {
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid gray;
      font-size: 18px;
    }
    .onehead:hover {
      cursor: pointer;
    }
    //二级盒子
    .twohead {
      margin-top: 5px;
      display: flex;
      font-size: 20px;
      .erji {
        flex: 13%;
        display: flex;
        flex-direction: column;
        // justify-content: space-around;
        height: 350px;
        font-size: 16px;
        border-right: 1px solid gray;
        margin-right: 30px;
        overflow: auto;
        div {
          margin-top: 20px;
        }
      }
      .erji:hover {
        cursor: pointer;
      }
      .erbox {
        flex: 80%;
        height: 350px;
        display: flex;
        // justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 15px;
        overflow: auto;
        .sanji {
          //  flex: 33.3%;
          width: 33.3%;
          font-size: 16px;

          .sanjis {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            flex-wrap: wrap;
            font-weight: 700;
          }
          .sijisi {
            margin: 10px 0;
            font-size: 12px;
          }
        }
      }
    }
  }
}
//点击文字颜色改变
.clicktext {
  color: skyblue;
}
</style>
<style >
.el-button--primary {
  height: 32px;
  width: 72px;
  line-height: 8px;
  background-color: #004fe0 !important;
}
.el-button--small {
  height: 32px;
  width: 72px;
  line-height: 8px;
  border: 1px solid #004fe0;
  color: #004fe0;
}
</style>
